<template>
	<!-- 职位列表 -->
	<view>
		<view class='job_item' v-for='(item,index) in jobs' :key='index' @click='nav_job_detail(item.id)'>
			<view class='point' v-if="(status==3||status==4)&&item.reverseStatus==2"></view>
			<!-- <image class='icon_prior' src="/static/icon69.png"></image> -->
			<view class='job_title'>
				<view class='job_name'>{{item.name}}</view>
				<view class='job_wages'>{{item.salary}}</view>
			</view>
			<view class='job_dem'>{{item.workAddressCity}}-{{item.workAddressRegion}}<text class='text3'>{{item.minimumEducationName}}</text>{{item.workExperienceName}}</view>
			<view class='job_label_box'>
				<scroll-view class='scroll_label' scroll-with-animation="true" scroll-x="true">
					<view class='label' v-if="item.hierarchyName">{{item.hierarchyName}}</view>
					<view class='label' v-if="item.teacherModeName">{{item.teacherModeName}}</view>
					<view class='label' v-if="item.startDate">{{item.startDate}}</view>
				</scroll-view>
			</view>
			<view class='job_mech'>
				<image class='mech_logo' :src="item.businessLogo" mode="aspectFill"></image>
				<view class='mech_dem'>
					<view class="mech_name_box"><scroll-view class='mech_name' scroll-x="true" scroll-with-animation="true">{{item.businessName}}</scroll-view></view>
					<view class='mech_desc'>
						<!-- <view class='mech_num'>教育平台 <text class='text4'> · 教育人数{{item.teacherNum?item.teacherNum:'-'}}</text></view> -->
						<scroll-view class='scroll' scroll-x="true" scroll-with-animation="true">{{item.categoryNames?'教育范围: '+item.categoryNames:''}}</scroll-view>
						<scroll-view class='mech_space' scroll-x="true" scroll-with-animation="true" v-if="item.distance||item.distance==0">距离您 {{item.space}} {{item.distance>1000?'km':'m'}}</scroll-view>
						<view class='mech_space' v-else></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
		    jobs: {
		        type: Array
			},
			status: {
				type: Number
			}
		},
		methods:{
			// status  1-普通  2-发起  3-接收  4-邀请  5-收藏
			nav_job_detail(id){
				uni.navigateTo({
					url: '../../pages/jobDetail/jobDetail?id='+id+'&status='+this.$props.status
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.job_item{
		background: #fff;
		margin-bottom: 12rpx;
		padding: 32rpx 40rpx;
		position: relative;
		.point{
			position: absolute;
			top: 18rpx;
			right: 24rpx;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: #F63236;
		}
		.icon_prior{
			position: absolute;
			top: 0;
			left: 0;
			width: 60rpx;
			height: 62rpx;
		}
		.job_title{
			display: flex;
			flex-direction: row;
			align-items: center;
			.job_name{
				flex: 1;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color:rgba(63,74,88,1);
				overflow: hidden;
				margin-right: 16rpx;
			}
			.job_wages{
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 50rpx;
				color:rgba(91,144,255,1);
				.text1{
					font-size: 30rpx;
					font-weight:500;
					margin: 0 4rpx;
				}
				.text2{
					font-size: 30rpx;
					font-weight:500;
				}
			}
		}
		.job_dem{
			margin: 16rpx 0 12rpx 0;
			text-align: left;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color:rgba(63,74,88,1);
			.text3{
				margin: 0 24rpx;
			}
		}
		.job_label_box{
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			height: 48rpx;
			.scroll_label{
				width: 100%;
				height: 48rpx;
				line-height: 40rpx;
				overflow: hidden;
				.label{
					display: inline-block;
					background: #F6F7F9;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color:rgba(146,155,167,1);
					border-radius: 8rpx;
					margin-right: 16rpx;
				}
			}
		}
		.job_mech{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 32rpx;
			.mech_logo{
				width: 60rpx;
				height: 60rpx;
				border: 2rpx solid rgba(112,112,112,0.1);
				border-radius: 8rpx;
				margin-right: 16rpx;
			}
			.mech_dem{
				flex: 1;
				width: 0;
				.mech_name_box{
					height: 34rpx;
					overflow: hidden;
					margin-bottom: 2rpx;
					.mech_name{
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 34rpx;
						color:rgba(63,74,88,1);
						overflow: hidden;
						white-space: nowrap;
					}
				}
				.mech_desc{
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 32rpx;
					overflow: hidden;
					.mech_num{
						flex: 1;
						height: 54rpx;
						font-size: 22rpx;
						font-weight: 400;
						line-height: 52rpx;
						color:rgba(146,155,167,1);
						.text4{
							margin-left: 6rpx;
						}
					}
					.scroll{
						flex: 1;
						width: 0;
						height: 54rpx;
						font-size: 22rpx;
						font-weight: 400;
						line-height: 52rpx;
						color:rgba(146,155,167,1);
						margin-right: 24rpx;
						overflow: hidden;
						white-space: nowrap;
					}
					.mech_space{
						width: 170rpx;
						text-align: right;
						height: 54rpx;
						font-size: 22rpx;
						font-weight: 400;
						line-height: 52rpx;
						color:rgba(146,155,167,0.5);
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
